<template>
    <div>
        门店名称:<input type="text" v-model="infoc.shopname" />
        <input type="button" value="查询" class="btn btn-success" @click="getList" />
        <h1>门店列表</h1>
        <input type="button" value="门店增加" class="btn btn-success" @click="ok" />

        <input type="button" value="批量上架" class="btn btn-success" @click="Shopstate(1)" />
        <input type="button" value="批量下架" class="btn btn-success" @click="Shopstate(0)" />
        <input type="button" value="批量删除" class="btn btn-success" @click="ShopupdateAll" />
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="cheked" @click="gocheckAll" /></td>
                    <td>门店名称</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>介绍</td>
                    <td>地址</td>
                    <td>状态</td>
                    <td>门店logo</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in infoq.list":key="item.id":value="item.id">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="checkOne" /></td>
                    <td>{{item.shopname}}</td>
                    <td>{{item.beginTime}}</td>
                    <td>{{item.endTime}}</td>
                    <td>{{item.serviceRange}}</td>
                    <td>{{item.shopkeeper}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.desc}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.state==1?"营业中":"未营业" }}</td>
                    <td>
                        <img :src="item.logo" alt="" width="100" height="100">
                    </td>
                    <td>
                        <img :src="item.photo" alt="" width="100" height="100">
                    </td>
                    <td>
                        <input type="button" value="删除" class="btn btn-success" @click="del(item.id)" />
                        <input type="button" value="修改" class="btn btn-success" @click="upd(item.id)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        当前第{{infoc.pageindex}}页/共{{infoq.totacount}}条/共{{infoq.totapage}}页
        <input type="button" value="首页" @click="Fenye(1)" />
        <input type="button" value="上一页" @click="Fenye(infoc.pageindex-1)" />
        <input type="button" value="下一页" @click="Fenye(infoc.pageindex+1)" />
        <input type="button" value="尾页" @click="Fenye(infoq.totapage)" />
    </div>

</template>

<script setup lang="ts">

import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'
const route=useRoute();
const router=useRouter();

//单个复选框选中与没选中
let cheked=ref(false);

//多个复选框选中与没有选中
let ids=ref([]);


//单选
const gocheckAll=()=>{
    cheked.value=!cheked.value;
    //控制下面的复选框的状态
    if(cheked.value){
        //逻辑思路:如果复选框是选中的,让ids的值为当前列表(data,list)数据中的所有id
        ids.value=infoq.list.map((item:any)=>{
            return item.id;
        })
    }
        else{
            ids.value=[];
        }
   
}
//全选与全不选
const checkOne=()=>{
    if(ids.value.length==infoq.list.length){
        cheked.value=true;
    }
    else{
        cheked.value=false;
    }
}

//批量删除
const ShopupdateAll=()=>{
    var f=confirm('确定要删除吗?');
    if(f){
        axios({
            url:'/api/Shop/DelNo',
            method:'delete',
            params:{
                ids:ids.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功!');
                getList();
            }
            else{
                alert('删除失败!');
            }
        })
    }
}

const Shopstate=(state:any)=>{
    axios({
        url:'/api/Shop/ZtNo',
        method:'post',
        params:{
            ids:ids.value.toString(),
            state:state,
        }
    })
    .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功!');
                getList();
            }
            else{
                alert('修改失败!');
            }
        })
}



//钩子函数
onMounted(()=>{
    getList();
})

const ok=()=>{
    router.push('/ShopAdd');
}

//传数据
const infoc:any=reactive({
    pageindex:1,
    pagesize:3
})
//取数据
const infoq:any=reactive({
    list:[],
    totacount:0,
    totapage:0,
})
//分页
const Fenye=(num:any)=>{
    if(num<1){
        infoc.pageindex=1;
        return;
    }
    if(num>infoq.totapage){
        infoc.pageindex=infoq.totapage;
        return;
    }
    infoc.pageindex=num;
    getList();
}


//显示
const getList=()=>{
    axios({
        url:'/api/Shop/GetList',
        method:'get',
        params:infoc
    })
    .then(res=>{
        console.log(res);
        infoq.list=res.data.list;
        infoq.totacount=res.data.totacount;
        infoq.totapage=res.data.totapage;
    })
    .catch(err=>{
        console.log(err);
    })
}
//逻辑删除
const del=(id:any)=>{
    var d=confirm('确定要删除吗?');
    if(d){
        axios({
            url:'/api/Shop/Del',
            method:'delete',
            params:{
                id:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功!');
                getList();
            }
            else{
                alert('删除失败!');
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}
//修改跳转
const upd=(id:any)=>{
    router.push({
        path:'/Shopupdate',
        query:{
            id:id
        }
    })
}



</script>